<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>风险检测</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/report.css">
</head>
<body>
    <header class="header">
        <div class="sell"></div>
        <div class="top">
            <div class="inner">
                <img class="img"src="images/logo.png" alt="">
                <label for="">
                  <input type="text">
                  <a href="#"><img src="images/so1.png" alt=""></a>
                </label>
                <div class="user">
                <img src="images/user.jpg" alt="">
                </div>
                <div class="tel">
                <p>呼叫律师团<span>01-14725836</span></p>
                </div>  
            </div>
            <div class="wrap">
                <div class="wnav" style="width:1200px;height:30px;margin:0 auto;position:relative">
                    <div class="nav">
                        <ul class="href">
                            <li class=""><a href="">首页</a></li>
                            <li><a href="">企业服务</a></li>
                            <li><a href="">云小律</a></li>
                            <li><a href="">云律通媒体</a></li>
                            <li><a href="">法律助手</a></li>
                            <li><a href="">控制中心</a></li>
                        </ul>    
                    </div>
                </div> 
                <ol class="s_nav">
                        <li class="qyfw">
                            <ol class="one">
                                <li><a href="#"><img src="images/qyfw1.png" alt=""><p>合同起草</p></a></li>
                                <li><a href="#"><img src="images/qyfw2.png" alt=""><p>智能文书生成</p></a></li>
                                <li><a href="#"><img src="images/qyfw3.png" alt=""><p>合同审查</p></a></li>
                                <li><a href="#"><img src="images/qyfw4.png" alt=""><p>律师函</p></a></li>
                                <li><a href="#"><img src="images/qyfw5.png" alt=""><p>诉讼仲裁</p></a></li>
                                <li><a href="#"><img src="images/qyfw6.png" alt=""><p>在线法务管家</p></a></li>  
                            </ol>
                            <ol class="two">
                                <li><a href="#"><img src="images/qyfw7.png" alt=""><p>项目专项法律顾问</p></a></li>
                                <li><a href="#"><img src="images/qyfw8.png" alt=""><p>常年法律顾问</p></a></li> 
                            </ol>
                        </li>
                        <li class="yxl">
                            <ol class="one">
                                <li><a href="#"><img src="images/yxl1.png" alt=""><p>系统通知</p></a></li>
                                <li><a href="#"><img src="images/yxl2.png" alt=""><p>客服通知</p></a></li>
                                <li><a href="#"><img src="images/yxl3.png" alt=""><p>在线解答</p></a></li>           
                            </ol>
                        </li> 
                        <li class="flzs">
                            <ol class="one">
                                <li><a href="#"><img src="images/flzs1.png" alt=""><p>办事地点查询</p></a></li>
                                <li><a href="#"><img src="images/flzs2.png" alt=""><p>利息查询</p></a></li>
                                <li><a href="#"><img src="images/flzs3.png" alt=""><p>诉讼费计算</p></a></li>
                                <li><a href="#"><img src="images/flzs4.png" alt=""><p>诉讼时效计算器</p></a></li>
                            </ol>
                        </li> 
                        <li class="kzzx">
                            <ol class="one">
                                <li><a href="#"><img src="images/kzzx1.png" alt=""><p>控制中心</p></a></li>
                                <li><a href="#"><img src="images/kzzx2.png" alt=""><p>我的企业</p></a></li>
                                <li><a href="#"><img src="images/kzzx3.png" alt=""><p>我的工单</p></a></li>
                                <li><a href="#"><img src="images/kzzx4.png" alt=""><p>我的积分</p></a></li>
                                <li><a href="#"><img src="images/kzzx5.png" alt=""><p>我的收藏</p></a></li>
                                <li><a href="#"><img src="images/kzzx6.png" alt=""><p>账号管理</p></a></li>
                                <li><a href="#"><img src="images/kzzx7.png" alt=""><p>帮助与反馈</p></a></li>            
                            </ol>
                        </li> 
                </ol>
            </div>
        </div>
        <div class="text">
          <div class="inner">
            <p><span>首页</span>-<span>风险检测答题说明</span>-<span>报告</span></p>
          </div>
        </div>
    </header>
<div class="banner">
    <div id="watch">
    <div class="case">
        <div class="dial">
            <div class="hands">
                <div class="s" style="transition: all 2s">
                    <div></div>
                </div>
            </div>
            
            <div class="shadow">
                <p id ="p1" style="    position: absolute; top: 40%;text-align: center; width: 100%; margin-top: -46px;color:#fff;font-size: 44px;text-shadow:0px 0px 30px #fff;font-weight: blod"></p>
            </div>
                
        </div>
    </div>
    </div>
</div>
<div class="main s" style="position:relative;background:#f8fafc;">
    <div class="top" style="">
    <h1>您所在的企业风险检测结果为<span>35分</span></h1>
    <p>经初步检测，贵企业法律 [<span>风险严重</span>]，建议进行深度检测</p>
    </div>
    <div class="more" style="background:#f8fafc;height:94px;"><a href="" class="show" style="">付费解决</a></div>
    <ul class="list" style="width:1200px;display: flex; display: -webkit-flex;justify-content: space-between;margin:90px auto 60px">
        <li>
            <h2>企业设立</h2>
            <p class="s_tit">风险可控</p>
            <p class="about">您所在的企业在企业设立维度存在的法律风险较低。</p>
            <div class="wraping" style="">
                <div class="circle_step" state="1" press_name="circle_step1" style="margin-left:0;">
                    <div id="circle_step1">
                        <strong class="p1"></strong></div>
                </div>
            </div>
            <a href="" class="show">深度检测</a>
        </li>
        <li>
                <h2>企业管理</h2>
                <p class="s_tit">风险可控</p>
                <p class="about">您所在的企业在企业设立维度存在的法律风险较低。</p>
            <div class="wraping" style="">
                <div class="circle_step" state="-1" press_name="circle_step2">
                    <div id="circle_step2"><strong class="p2">75</strong></div>
                </div>
            </div>
            <a href="" class="show">深度检测</a></li>
        <li>
                <h2>劳动人事</h2>
                <p class="s_tit">风险可控</p>
                <p class="about">您所在的企业在企业设立维度存在的法律风险较低。</p>
            <div class="wraping" style="">
                <div class="circle_step" state="-1" press_name="circle_step3">
                    <div id="circle_step3"><strong class="p3"></strong></div>
            
                </div>
            </div>
            <a href="" class="show">深度检测</a></li>
        </li>
    </ul>
    <ul class="list" style="width:1200px;display: flex; display: -webkit-flex;justify-content: space-between;margin:0 auto 60px;">
        <li>
                <h2>投资融资</h2>
                <p class="s_tit">风险可控</p>
                <p class="about">您所在的企业在企业设立维度存在的法律风险较低。</p>
            <div class="wraping" style="">
                <div class="circle_step" state="-1" press_name="circle_step4">
                    <div id="circle_step4"><strong class="p2"></strong></div>
            
                </div>
            </div>
            <a href="" class="show">深度检测</a>
        </li>
        <li>
                <h2>诉讼仲裁</h2>
                <p class="s_tit">风险可控</p>
                <p class="about">您所在的企业在企业设立维度存在的法律风险较低。</p>
            <div class="wraping" style="">
                <div class="circle_step" state="-1" press_name="circle_step5">
                    <div id="circle_step5"><strong class="p1"></strong></div>
            
                </div>
            </div>
            <a href="" class="show">深度检测</a></li>
        <li>
                <h2>知识产权</h2>
                <p class="s_tit">风险可控</p>
                <p class="about">您所在的企业在企业设立维度存在的法律风险较低。</p>
            <div class="wraping" style="">
                <div class="circle_step" state="-1" press_name="circle_step6">
                    <div id="circle_step6"><strong class="p1"></strong></div>
            
                </div>
            </div>
            <a href="" class="show">深度检测</a></li>
        </li>
    </ul>
</div>
<footer>
        <div class="inner" style="position: relative;">
                <img class="logo"src="images/logo_footer.png" alt="">
                <ol>
                    <li><a href="">服务支持</a></li>
                    <li><a href="">付费咨询</a></li>
                    <li><a href="">云小律</a></li>
                </ol>
                <a href="#" class="sm">法律声明</a>
                <p>@备案号22582522</p>
        </div>
        
</footer>
<!-- 数字插件 -->
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/prefixfree.min.js"></script>
<script src="lib/countup.js"></script>
<script src="js/style.js"></script>
<script>

$(function(){
    
function time() {
    var d = new Date(); 
    //var s = (d.getSeconds() + d.getMilliseconds()/1000) /60 * 360;
    var n= parseInt($('.main.s .top h1 span').html());
    console.log(n);
   var ss = (n/100)*180;
   console.log(ss);
    $('#watch .hands .s').animate({},function(){                                       //第一个花括号里面是动画内容，可以为空，但不能省去中括号
       $('#watch .hands .s').css('transform', 'rotate('+-ss+'deg)');                               //在回调函数里面改变css属性来实现transform中的动画变换 
    });
// $('.shadow p').html();
}

time();
var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.'
};
var number= parseInt($('.main.s .top h1 span').html());
var  demo = new CountUp('p1',  0, number, 0, 0, options);
demo.start();

});
</script>
<script src="lib/circleChart.min.js"></script>
<script>
    var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.'
};
var  demo1 = new CountUp('11',  0, 35, 0, 0, options);
var  demo2 = new CountUp('22',  0, 42, 0, 0, options);
var  demo3 = new CountUp('33',  0, 94, 0, 0, options);
var  demo4 = new CountUp('44',  0, 58, 0, 0, options);
var  demo5 = new CountUp('55',  0, 24, 0, 0, options);
var  demo6 = new CountUp('66',  0, 12, 0, 0, options);

// 滚动条距离顶部的距离 大于 200px时


    $(".circleChart#2").circleChart({
        size:150,
        startAngle: 50,
        animate: true,
        color: '#2ad1e8',
        widthRatio: 0.3,
        textCenter: false,
        speed:1000,
		// onDraw: function(el, circle) {
        //     circle.text(Math.round(circle.value));
        // }
    });
    $(".circleChart#3").circleChart({
        size:150,
        startAngle: 50,
        animate: true,
        color: '#ffa751',
        widthRatio: 0.3,
        textCenter: false,
        speed:1000,
    });
    $(".circleChart#4").circleChart({
        size:150,
        startAngle: 0,
        animate: true,
        color: '#ee5764',
        widthRatio: 0.3,
        textCenter: false,
        speed:1000,
    });
    $(".circleChart#5").circleChart({
        size:150,
        startAngle:120,
        animate: true,
        color: '#ffa751',
        widthRatio: 0.3,
        textCenter: false,
        speed:1000,
    });
    $(".circleChart#6").circleChart({
        size:150,
        startAngle: 50,
        animate: true,
        color: '#39c1ef',
        widthRatio: 0.3,
        textCenter: false,
        speed:1000,
    });
    $(".circleChart#7").circleChart({
        size:150,
        startAngle: 70,
        animate: true,
        color: '#39c1ef',
        widthRatio: 0.3,
        textCenter: false,
        speed:1000,
    });
    



demo1.start();

demo2.start();

demo3.start();

demo4.start();

demo5.start();

demo6.start();

</script>
<script src="lib/circle-progress.js"></script>

<script>
    //初始化环形进度条
    function create_circle(num,val_num){
        if(num==1||num==5||num==6){
            $('#circle_step'+num).circleProgress({
                value: val_num,//你需要展示的值，值从0.0到1.0，默认值为0
                size: 120,//环形图的大小，单位像素，默认值100
                startAngle:-3,//初始角度，默认值为-Math.PI
                reverse:false,//是否反向绘制圆弧和动画，默认值为false
                lineCap:'round',//圆弧的线头样式："butt"、"round"和"square"。默认值为"butt"
                thickness:18,//进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。默认值为auto
                emptyFill:'rgba(0, 0, 0, .1)',//空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
                fill: {
                    //圆弧填充的配置。
    //				-{ color: "#ff1e41" }
    //				-{ color: 'rgba(255, 255, 255, .3)' }
    //				-{ gradient: ["red", "green", "blue"] }
    //				-{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
    //				-{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
    //				-{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
    //				-{ image: "http://i.imgur.com/pT0i89v.png" }
    //				-{ image: imageInstance }
    //				-{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
    //				默认值为{ gradient: ["#3aeabb", "#fdd250"] }
                    gradient: ["#39c1ef","#2ae6a8"]
                }
            }).on('circle-animation-progress', function(event, progress,stepValue) {//当图像正在绘制时的监听事件
                $(this).find('strong').html(String((stepValue*100).toFixed(0)));
            });
        }else if(num==2||num==4){
            $('#circle_step'+num).circleProgress({
                value: val_num,
                size: 120,
                startAngle:-2.5,
                reverse:false,
                lineCap:'round',
                thickness:18,
                fill: {
                    gradient: ["#ffa751","#ffe259"]
                }
            }).on('circle-animation-progress', function(event, progress,stepValue) {
                $(this).find('strong').html(String((stepValue*100).toFixed(0)) + '');
            });
        }else if(num==3){
            $('#circle_step'+num).circleProgress({
                value: val_num,
                size: 120,
                startAngle:0,
                reverse:false,
                lineCap:'round',
                thickness:18,
                fill: {
                    gradient: ["#ee5764","#ffc371"]
                }
            }).on('circle-animation-progress', function(event, progress,stepValue) {
                $(this).find('strong').html(String((stepValue*100).toFixed(0)) + '');
            });
        }
    }
   

  
    create_circle(1,0.35);   
    create_circle(2,0.42);
    create_circle(3,0.94);
    create_circle(4,0.58);
    create_circle(5,0.24);
    create_circle(6,0.12);



   
    //当鼠标点击环形进度条时
    //http://www.htmleaf.com/html5/html5-canvas/201505271918.html
    console.log(-Math.PI / 4 * 3);

</script>
    
</body>
</html>

